<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全部歌手页面</title>
		<script src="../../../js/vue.js"></script>
		<script src="../../../js/element.js"></script>
		<script src="../../../js/axios.min.js"></script>
		<link rel="stylesheet" href="../../../css/element.css">
		<link rel="stylesheet" href="../../../css/menus/find/singer.css">
		<link rel="stylesheet" href="../../../fonts/iconfont/iconfont.css">
	</head>
	<body>
		<div id="app">
			<div class="header">
				<div class="nav">
					<span @click="changeNav(i+1)" v-for="(nav, i) in navList">{{nav.name}}</span>
				</div>
			</div>

			<div class="main">
				<div class="singer" v-for="singer in singerList">
					<img :src="singer.singerImg" alt="" @click="jump(singer.singerId)">
					<div class="singerName" @click="jump(singer.singerId)">{{singer.singerName}}</div>
				</div>
			</div>
			<!-- 分页 -->
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="pageCurrent" :page-sizes="[10, 15]" :page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: function() {
				return {
					navList: [{
							id: 1,
							name: '全部',
							value: 'all'
						},
						{
							id: 2,
							name: 'A',
							value: 'A'
						},
						{
							id: 3,
							name: 'B',
							value: 'B'
						},
						{
							id: 4,
							name: 'C',
							value: 'C'
						},
						{
							id: 5,
							name: 'D',
							value: 'D'
						},
						{
							id: 6,
							name: 'E',
							value: 'E'
						},
						{
							id: 7,
							name: 'F',
							value: 'F'
						},
						{
							id: 8,
							name: 'G',
							value: 'G'
						},
						{
							id: 9,
							name: 'H',
							value: 'H'
						},
						{
							id: 10,
							name: 'I',
							value: 'I'
						},
						{
							id: 11,
							name: 'J',
							value: 'J'
						},
						{
							id: 12,
							name: 'K',
							value: 'K'
						},
						{
							id: 13,
							name: 'L',
							value: 'L'
						},
						{
							id: 14,
							name: 'M',
							value: 'M'
						},
						{
							id: 15,
							name: 'N',
							value: 'N'
						},
						{
							id: 16,
							name: 'O',
							value: 'O'
						},
						{
							id: 17,
							name: 'P',
							value: 'P'
						},
						{
							id: 18,
							name: 'Q',
							value: 'Q'
						},
						{
							id: 19,
							name: 'R',
							value: 'R'
						},
						{
							id: 20,
							name: 'S',
							value: 'S'
						},
						{
							id: 21,
							name: 'T',
							value: 'T'
						},
						{
							id: 22,
							name: 'U',
							value: 'U'
						},
						{
							id: 23,
							name: 'V',
							value: 'V'
						},
						{
							id: 24,
							name: 'W',
							value: 'W'
						},
						{
							id: 25,
							name: 'X',
							value: 'X'
						},
						{
							id: 26,
							name: 'Y',
							value: 'Y'
						},
						{
							id: 27,
							name: 'Z',
							value: 'Z'
						},
						{
							id: 28,
							name: '#',
							value: 'other'
						},
					],
					pageCurrent: 1, //歌手分页当前页码
					pageSize: 15, //歌手分页每页条数
					total: 0,
					navActive: '', //当前选中的菜单
					// 歌手列表
					singerList: ''
				}
			},
			mounted() { // 生命周期函数
				this.changeNavDefault()
			},
			methods: {
				// 页面默认菜单选中 ‘全部’
				changeNavDefault() {
					const navListDocument = document.querySelectorAll('.nav span')
					navListDocument[0].classList.add('active')
					this.navActive = 'all'
					this.getSingerInfo(1)
				},
				// 当用户点击上方菜单时
				changeNav(id) {
					console.log(id)
					// 遍历菜单
					const navListDocument = document.querySelectorAll('.nav span')
					// 遍历菜单
					for (var i = 0; i < navListDocument.length; i++) {
						// 去掉之前选中的样式
						if (navListDocument[i].classList.contains('active')) {
							navListDocument[i].classList.remove('active')
						}
					}
					// 添加选重的样式
					navListDocument[id - 1].classList.add('active')

					this.navActive = this.navList[id - 1].value

					this.getSingerInfo(1)
				},
				getSingerInfo(current) {
					console.log(this.navActive)
					axios({
						method: 'get',
						url: 'http://localhost:8160/singer/page/' + this.navActive + '/' + current +
							'/' + this.pageSize,
						headers: {
							'token': this.getCookie('yxy-pre:user_token')
						}
					}).then(res => {
						console.log(res.data)
						if (res.data.code == 200) { //成功
							console.log(res.data)
							this.singerList = res.data.data.singerPage.records
							//2、将后端分页信息也赋值给前端相应字段
							this.pageCurrent = res.data.data.singerPage.current
							this.pageSize = res.data.data.singerPage.size
							this.total = res.data.data.singerPage.total
							
						} else {
							this.$message.error("系统错误请联系管理员！")
						}
					})
				},
				//更新每页条数
				handleSizeChange(val) {
					// console.log(`每页 ${val} 条`);
					this.pageSize = val
					this.getSingerInfo()
				},
				//更新当前页
				handleCurrentChange(val) {
					// console.log(`当前页: ${val}`);
					this.pageCurrent = val
					
					this.getSingerInfo(val)
				},
				// 通过值获取cookie
				getCookie(key) {
					// 如果浏览器中有多个cookie，会以 ；分隔 例如：a=a1;b=b1
					// 根据 ；将 cookie 字符串分割成数组 
					var cookieArr = document.cookie.split("; ");
					// 遍历数组
					for (var i = 0; i < cookieArr.length; i++) {
						// 再根据 = 分隔数组中的每一个元素，数组第一个就是key，第二个就是value
						var cookiePair = cookieArr[i].split("=");
						if (key == cookiePair[0]) {
							return decodeURIComponent(cookiePair[1]);
						}
					}
					return null;
				},
				// 当用户点击歌手图片或歌手名字
				jump(id) {
					// 1、打开歌手
					// 获取父页面的 iframe 标签 的 src
					// 设置 src，并将专辑的 id，作为参数链接拼接的后面，传到父页面
					const fatherHtml = window.parent.document.querySelector("#indexIframe")
					fatherHtml.setAttribute('src', 'singer/singer.html?id=' + id)
					// 清空数据
					this.bannerInfo = ''
				},
			}
		})
	</script>
</html>